<template>
<div class="main-container">
  <layout :search="false">

    <template slot="operation">
      <div class="operation-left">
        <el-button type="primary" icon="el-icon-plus" @click="handleEdit" v-if="$checkAuth('设备管理')">添加设备信息</el-button>
      </div>
    </template>
    <template slot="content">
      <div class="h-100percent overflow-auto">
        <el-table border stripe :data="inspectionList"  v-loading="loading" @row-dblclick="rowDoubleClick">
          <el-table-column prop="id" fixed label="序号" type="index" align="center" width="100"></el-table-column>
          <el-table-column prop="equipmentFullName" fixed label="设备名称"  align="center" header-align="center" min-width="250"></el-table-column>
          <el-table-column prop="planHour" fixed label="应开动工时" align="center" min-width="125"></el-table-column>
          <!-- <el-table-column prop="state" label="状态" align="center" min-width="120"></el-table-column> -->
          <el-table-column prop="remark" label="备注" align="center" min-width="350"></el-table-column>
          <el-table-column prop="operation" align="center" fixed="right" width="180" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" v-if="$checkAuth('设备管理')">修改</el-button>
              <el-button type="primary" size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)" v-if="$checkAuth('设备管理')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <four-add ref="four" @fetchData="fetchData" :formData="formData"></four-add>
    </template>
  </layout>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { State, namespace, Action, Mutation } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'
import fourAdd from './fourAdd.vue'
import { selectEquipmentList, deleteEquipmentList } from '@/api/interface1'
import { Message } from 'element-ui'
import {get} from 'lodash'
@Component<Equipment>({
  components: {
    Layout,
    fourAdd
  },
  //页面初始化
  created() {
    this.fetchData()
  }
})
export default class Equipment extends Vue {
  public $refs!: {
    review: any
    lookdetail: any
    four: any
  }
  visible: boolean = false
  reviewShow: boolean = true
  loading:boolean = false
  selected: boolean = false
  // singleSelected: boolean = false
  selectId: string = '1'
  selectNumber: string = ''
  selectDispatchNumber: string = ''
  selection: any[] = []
  search = {
    worker: '', //完工人
    dispatchNumber: '', //派工单号
    beginTime: 0, //时间范围（开始）
    endTime: 0,
    page: 1,
    pageSize: 20
  }
  formData = {
    equipmentFullName: '',
    equipmentShortName: '',
    planHour: '',
    remark: '',
    state:'',
  }

  inspectionList: any[] = [
    
  ]


async fetchData() {
    this.loading = true
    const res =await selectEquipmentList().catch((err: any) => {
            Message.error(err)
    })
      let data =get(res,'data',[])
      console.log({data})
      this.inspectionList = data
      this.loading = false
  }

  rowDoubleClick(row) {
    console.log(row.id)
  }
  clear() {
    this.search = {
      worker: '', //完工人
      dispatchNumber: '', //派工单号
      beginTime: 0, //时间范围（开始）
      endTime: 0,
      page: 1,
      pageSize: 20
    }
  }
  onSubmit() {}
  selectionChange(selection: any) {
    // this.selected = selection.length > 0
    if (selection.length == 1) {
      //  this.singleSelected = selection.length === 1
      this.reviewShow = !this.reviewShow
      this.selectId = selection[0].id
      this.selectNumber = selection[0].numberPending
      this.selectDispatchNumber = selection[0].dispatchNumber
      console.log(selection)
    } else {
      this.reviewShow = !this.reviewShow
    }
  }
  handleEdit(index, row) {
    if (row) {
      this.formData = { ...row }
    } else {
      this.formData = {
        equipmentFullName: '',
        equipmentShortName: '',
        planHour: '',
        remark: '',
        state:'',
      }
    }

    this.$refs.four.open(true)
  }
  handleDelete(index, row) {
    const { id } = row
    const params = {
      id: id
    }
    this.$alert('您确定删除本记录？', '错误提示', {
      confirmButtonText: '确定',
      type: 'error',
      callback: action => {
        // this.$message({
        //   type: 'info',
        //   message: `action: ${action}`
        // })
        if (action === 'confirm') {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '操作提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })

            .then(() => {
              //想后端传递删除数据id
              deleteEquipmentList(params).then(res => {
                if (res.success) {
                  Message.success('删除成功')
                  this.fetchData()
                  this.visible = false
                }
              })
              //   rows.splice(index, 1)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      }
    })
  }

  fourAdd() {}
}
</script>

<style lang="scss" scoped>
  .equipmentName{
    text-indent: 5px;
  }
</style>
